<!DOCTYPE html>
<html>
<head>
    <title>订单统计</title>
    #parse("sys/header.html")
    <script src="${rc.contextPath}/js/My97DatePicker/WdatePicker.js"></script>
    <script src="https://img.hcharts.cn/highcharts/highcharts.js"></script>

    <script src="${rc.contextPath}/js/highcharts/oldie.js?_${date.systemTime}"></script>
    <script src="${rc.contextPath}/js/highcharts/series-label.js?_${date.systemTime}"></script>
    <script src="${rc.contextPath}/js/highcharts/exporting.js?_${date.systemTime}"></script>
    <script src="${rc.contextPath}/js/highcharts/highcharts-zh_CN.js?_${date.systemTime}"></script>
    <style>
        .databox .dtitle .tab span {
            cursor: pointer;
            text-align: center;
        }

        .databox .dtitle span.on {
            border-bottom: 3px solid #4c8ced;
            color: #4c8ced;
        }

        .databox .dtitle span {
            color: #666;
            display: inline-block;
            height: 47px;
            line-height: 47px;
            margin-left: 4px;
            width: 100px;
        }

        .databox .dtitle .datefilter {
            float: right;
            margin: 10px 20px 0 0;
        }

        .databox .dtitle .datefilter b {
            color: #666;
            cursor: pointer;
            display: inline-block;
            font-weight: normal;
            margin: 5px 0 0 20px;
        }

        .databox .dtitle .datefilter b.on {
            color: #4c8ced;
        }

        .data_collect table {
            width: 90%;
            height: 60px;
            margin: 10px auto;
            border-collapse: collapse;
        }

        .data_collect table td {
            border-right: 1px solid #eee;
        }
        .data_collect table td .ico {
            display: inline-block;
            width: 36px;
            height: 36px;
            background: url(../statics/image/sprite2.png) no-repeat;
            float: left;
            margin: 0 4px 0 8px;
            vertical-align: middle;
        }
        .data_collect table td .data {
            display: inline-block;
            float: left;
            vertical-align: middle;
        }
        .data_collect table td .data p {
            font-weight: bold;
            color: #969696;
            margin: 0 0 0px;
        }
        .data_collect table td .data strong {
            font-size: 14px;
            color: #666;
        }
        .data_collect table td .ico8 {
            background-position: 0 -38px;
        }
        .data_collect table td .ico9 {
            background-position: 0 -76px;
        }
        .data_collect table td .ico10 {
            background-position: 0 -114px;
        }
    </style>
</head>
<body>
<div id="rrapp" v-cloak style="padding: 15px;">
    <div v-show="showList">
        <div class="grid-btn">
            <div class="form-group col-sm-2" style="width: 200px">
                <input id="orderdateBegin" name="orderdateBegin" type="text" class="form-control"
                       onClick="WdatePicker({el:this,dateFmt:'yyyy-MM-dd',maxDate:'#F{$dp.$D(\'orderdateEnd\')||\'2120-10-01\'}'})"
                       placeholder="开始时间">
            </div>
            <div class="form-group col-sm-2" style="width: 200px">
                <input id="orderdateEnd" name="orderdateEnd" class="form-control"
                       onClick="WdatePicker({minDate:'#F{$dp.$D(\'orderdateBegin\')}',el:this,dateFmt:'yyyy-MM-dd',maxDate:'2120-10-01'})"
                       placeholder="结束时间">
            </div>
            <a class="btn btn-default" @click="query">查询</a>
        </div>

        <div class="data_collect" id="tableDiv">
            <table>
                <tbody>
                <tr>
                    <td><div class="ico ico8"></div>
                        <div class="data">
                            <p>总计</p><strong id="sumAmount">0</strong>
                        </div></td>
                    <td><div class="ico ico8"></div>
                        <div class="data">
                            <p>收款金额</p><strong id="sumGatheringAmount">0</strong>
                        </div></td>
                    <td><div class="ico ico10"></div>
                        <div class="data">
                            <p>退款金额</p><strong id="sumRefundAmount">0</strong>
                        </div></td>
                    <td><div class="ico ico7"></div>
                        <div class="data">
                            <p>总笔数(有效)</p><strong id="sumCountId">0</strong>
                        </div></td>
                    <td><div class="ico ico9"></div>
                        <div class="data">
                            <p>退款笔数</p><strong id="sumCountRefund">0</strong>
                        </div></td>
                    <td><div class="ico ico8"></div>
                        <div class="data">
                            <p>历史总额</p><strong id="sum">0</strong>
                        </div></td>
                    <td><div class="ico ico8"></div>
                        <div class="data">
                            <p>当天总额</p><strong id="days">0</strong>
                        </div></td>
                    <td><div class="ico ico8"></div>
                        <div class="data">
                            <p>当月总额</p><strong id="dateFormat">0</strong>
                        </div></td>
                    <td><div class="ico ico8"></div>
                        <div class="data">
                            <p>本季度总额</p><strong id="quarter">0</strong>
                        </div></td>
                    <td><div class="ico ico8"></div>
                        <div class="data">
                            <p>当年总额</p><strong id="year">0</strong>
                        </div></td>
                </tr>
                </tbody>
            </table>
        </div>


        <div id="jqGridPager" class="databox" style="text-align: left">
            <div class="dtitle">
                <div class="datefilter">
                    <input type="hidden" id="userIds" name="userIds" value="">
                    <b id="mch_latelySeven" class="on">最近7天</b><b id="mch_latelyThirty">最近30天</b>
                </div>
                <div class="tab" id="tabDiv" style="float: left;">
                    <span id="mch_personalAmount" class="" onclick="changeLine(5,this);"></span>
                </div>
            </div>
            <div class="chart_wrap" style="clear: left">
                <div class="chart_con">
                    <div id="containerCS" class="container" style="width:95%;height:40%;text-align: center"></div>
                    <div id="containerZZ" class="container" style="width:95%;height:40%;text-align: center"></div>
                    <div id="containerSX" class="container" style="width:95%;height:40%;text-align: center"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    var thisURL = document.URL;
    var getval = thisURL.split('?')[1];
    userIds = (getval.split("=")[1]).split("&")[0];///对比收款员信息

    var type = 5;///
    days = -6;///默认是一周数据  -6是一周  -29是30天
    var vm = new Vue({
        el: '#rrapp',
        data: {
            showList: true,
            title: null,
            payorder: {}
        },
        methods: {
            query: function () {
                var orderdateBegin = $("#orderdateBegin").val();
                var orderdateEnd = $("#orderdateEnd").val();
                if (orderdateBegin == null || orderdateEnd == null || orderdateBegin == "" || orderdateEnd == "") {
                    alert("请选择时间段");
                } else {
                    days = 1;
                    onloadSeries(1);
                }
            },
            reload: function (event) {
            }
        }
    });
    Highcharts.setOptions({
        credits: {
            text: ''
        }
    });
    var chart = Highcharts.chart('containerCS', {
        chart: {
            type: 'line'
        }, subtitle: {
            text: ''
        }, legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle',
            borderWidth: 0
        }, yAxis: {
            title: {
                text: ''
            }, labels: {
                formatter: function () {
                    return this.value;
                }
            }
        }, plotOptions: {
            line: {
                dataLabels: {
                    enabled: true          // 开启数据标签
                },
                enableMouseTracking: true // 关闭鼠标跟踪，对应的提示框、点击事件会失效
            }
        }
    });
    var chartBar = Highcharts.chart('containerZZ', {
        chart: {
            type: 'column'
        }, subtitle: {
            text: ''
        }, legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle',
            borderWidth: 0
        }, yAxis: {
            title: {
                text: ''
            }, labels: {
                formatter: function () {
                    return this.value;
                }
            }
        }, plotOptions: {
            line: {
                dataLabels: {
                    enabled: true          // 开启数据标签
                },
                enableMouseTracking: true // 关闭鼠标跟踪，对应的提示框、点击事件会失效
            }
        }
    });
    var chartPie = Highcharts.chart('containerSX', {
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false
        }, legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle',
            borderWidth: 0
        },
        tooltip: {
            headerFormat: '',
            pointFormat: '{point.name}<br>百分比: <b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true
                },
                showInLegend: true
            }
        }
    });

    function onloadSeries(day) {
        //移除之前数据（折线图，柱状图，扇形图）
        var seriesLength = chart.series.length;
        var seriesBarLength = chartBar.series.length;
        var chartPieLength = chartPie.series.length;
        for (var ii = 0; ii < seriesLength; ii++) {
            chart.series[0].remove();
        }
        for (var ii = 0; ii < seriesBarLength; ii++) {
            chartBar.series[0].remove();
        }
        for (var ii = 0; ii < chartPieLength; ii++) {
            chartPie.series[0].remove();
        }
        var orderdateBegin = $("#orderdateBegin").val();//开始时间
        var orderdateEnd = $("#orderdateEnd").val();//结束时间
        $.ajax({
            type: "POST",
            url: "../payorder/orderContrast?day=" + day + "&type=" + type + "&orderdateBegin=" + orderdateBegin + "&orderdateEnd=" + orderdateEnd+"&userIds="+userIds,
            datatype: "json",
            success: function (dat) {
                if (dat.code == 0) {
                    //初始化数据（折线图，柱状图）
                    for (var i = 0; i < dat.mapchart.series.length; i++) {
                        chart.addSeries({
                            name: '',
                            data: [null, null, null, null, null, null, null, null]
                        });
                        chartBar.addSeries({
                            name: '',
                            data: [null, null, null, null, null, null, null, null]
                        });
                    }
                    //填充数据（折线图，柱状图）
                    chart.update({
                        title: dat.mapchart.title,
                        xAxis: dat.mapchart.xAxis,
                        series: dat.mapchart.series
                    });
                    chartBar.update({
                        title: dat.mapchart.title,
                        xAxis: dat.mapchart.xAxis,
                        series: dat.mapchart.series
                    });
                    //图表
                    if(dat.mapchart.listTjlb.amountBool){
                        $("#amountBool").text(dat.mapchart.listTjlb.amountBool);//控制是否展现顶部数据列表
                        $("#sumAmount").text(dat.mapchart.listTjlb.sumAmount);//总计
                        $("#sumGatheringAmount").text(dat.mapchart.listTjlb.sumGatheringAmount);//收款金额
                        $("#sumRefundAmount").text(dat.mapchart.listTjlb.sumRefundAmount);//退款金额
                        $("#sumCountId").text(dat.mapchart.listTjlb.sumCountId);//总笔数
                        $("#sumCountRefund").text(dat.mapchart.listTjlb.sumCountRefund);//退款笔数
                            //按时间查询区分类型  历史交易金额 days当天  dateFormat当月  quarter季度  year年
                        $("#sum").text(dat.mapchart.listTjlb.sum);//历史订单总金额
                        $("#days").text(dat.mapchart.listTjlb.days);//当天订单总金额
                        $("#dateFormat").text(dat.mapchart.listTjlb.dateFormat);//当月订单总金额
                        $("#quarter").text(dat.mapchart.listTjlb.quarter);//季度 订单总金额
                        $("#year").text(dat.mapchart.listTjlb.year);//年订单总金额

                        $("#containerSX").hide();
                    }else{
                        $("#tableDiv").hide();
                        //初始化数据（扇形图）
                        for (var i = 0; i < dat.mapchart.pieSeries.length; i++) {
                            chartPie.addSeries({
                                type: 'pie',
                                name: '',
                                data: [[null, null]]
                            });
                        }
                        //填充数据（扇形图）
                        chartPie.update({
                            title: dat.mapchart.title,
                            series: dat.mapchart.pieSeries
                        });
                    }
                }
            }
        });
    }

    $('#mch_latelySeven').click(function () { ///7天交易数据
        days = -6;
        onloadSeries(-6);
        $("#mch_latelySeven").addClass("on");
        $("#mch_latelyThirty").removeClass("on");
    });
    $('#mch_latelyThirty').click(function () { ///30天交易数据
        days = -29;
        onloadSeries(-29);
        $("#mch_latelyThirty").addClass("on");
        $("#mch_latelySeven").removeClass("on");
    });
    onloadSeries(days);//进入页面加载数据（交易金额）
</script>
</body>
</html>